import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { List, Tools, SwipeAction, Icon,Modal } from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';

const getLabel = Tools.getLabel;
const alert = Modal.alert;
@inject('userCenterStore')
@withRouter
@observer
export default class MyShare extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-userCenter-shareSet-mine',
  }

  addPage() {
    this.props.history.push({ pathname: '/userCenter/shareSet/AddShare' });
  }

  editPage(rowData) {
    this.props.history.push({ pathname: '/userCenter/shareSet/EditShare', rowData: rowData });
  }

  delShare(id, type) {
    const { userCenterStore: { userShareSetStore } } = this.props;
    const { onTabChange, myShareList } = userShareSetStore;
    const options = {
      url: '/api/blog/shareset/operateBlogShareSet',
      method: 'POST',
      params: {
        operation: 'delShare',
        id: id,
        shareType: type
      }
    };
    Tools.callApi(options).then((src) => {
      if (src.status == "1") {
        myShareList.clearData();
        userShareSetStore.initData();
      }
    });
  }

  render() {
    const { prefixCls, userCenterStore: { userShareSetStore } } = this.props;
    const {
      myShareList
    } = userShareSetStore;
    const runRow = (rowData, sectionID, rowID) => {
      if (rowData.canViewMinTime && rowData.canViewMinTime != '0' && rowData.canViewMinTime != '-1') {
        return (
          rowData.type != '7' ?
            <SwipeAction
              style={{ backgroundColor: 'gray' }}
              autoClose
              right={[
                {
                  text: getLabel('501169', '编辑'),
                  onPress: () => this.editPage(rowData),
                  style: { backgroundColor: '#4D7AD8', color: 'white' },
                },
                {
                  text: getLabel('91', '删除'),
                  onPress: () => 
                  alert(' ', getLabel('826','确定')+getLabel('91','删除')+getLabel('386724','吗？') , [
                    { text: getLabel('31129','取消') , onPress: () => console.log('cancel') },
                    { text: getLabel('826','确定') , onPress: () => this.delShare(rowData.randomFieldId, rowData.type) },
                  ]),
                  style: { backgroundColor: '#F4333C', color: 'white' },
                },
              ]}
            >
              <List.Item key={rowID}>

                <div className={`${prefixCls}-rowItem`}>{rowData.typespan}</div>
                <div style={{width: 'inherit',display: 'block',whiteSpace: 'normal'}} className={`${prefixCls}-time`}>{rowData.shareType2span + rowData.shareType3span}
                </div>
                <div className={`${prefixCls}-time`}>{getLabel(509722,'起止可查看时间')} {rowData.canViewMinTime}</div>

              </List.Item>
            </SwipeAction> : 
             <SwipeAction
             style={{ backgroundColor: 'gray' }}
             autoClose
             right={[
               {
                 text: getLabel('91', '删除'),
                 onPress: () => 
                 alert(' ', getLabel('826','确定')+getLabel('91','删除')+getLabel('386724','吗？') , [
                   { text: getLabel('31129','取消') , onPress: () => console.log('cancel') },
                   { text: getLabel('826','确定') , onPress: () => this.delShare(rowData.randomFieldId, rowData.type) },
                 ]),
                 style: { backgroundColor: '#F4333C', color: 'white' },
               },
             ]}
           >
            <List.Item key={rowID}>
              <div className={`${prefixCls}-rowItem`}>{rowData.typespan}</div>
              <div style={{width: 'inherit',display: 'block',whiteSpace: 'normal'}} className={`${prefixCls}-time`}>{rowData.shareType2span + rowData.shareType3span}
              </div>
              <div className={`${prefixCls}-time`}>{getLabel(509722,'起止可查看时间')} {rowData.canViewMinTime}</div>
            </List.Item>
            </SwipeAction>
        );
      } else {
        return (
          <List.Item key={rowID}>
            <div className={`${prefixCls}-rowItem`}>{rowData.typespan}</div>
            <div className={`${prefixCls}-time`}>{rowData.shareType2span + rowData.shareType3span}</div>
          </List.Item>
        );
      }

    };

    return (
      <div>
        <div className={`${prefixCls}-add`} >{getLabel(384480,'添加分享')}</div>
        <div style={{ height: "40px" }}>
          <div style={{ borderBottom: "1px solid #ddd", height: "39px", display: "flex" }}>
            <span onClick={(e) => { this.addPage() }} style={{ display: "flex", alignItems: "center", justifyContent: "center", margin: 0, padding: 0, width: "98%" }}>
              <Icon type="plus" color="#4D7AD8" size="xs" />&nbsp;&nbsp;{getLabel(384480,'添加分享')}
            </span>
          </div>
        </div>

        <ListViewPage.Normal key='keyMyShare'
          store={myShareList}
          //renderSectionHeader={sectionData} 
          //renderSeparator={separator} 
          renderRow={runRow}
          pageSize={20}
          initialListSize={20}
        />
      </div>
    )
  }
}